<template>
    <div id="customerChart" :style="{ width: width + 'px', height: height + 'px' }">
    </div>
</template>
    
<script setup lang='ts'>
import * as echarts from 'echarts'

import { onMounted, ref } from 'vue'
import axios, { Axios } from "axios"






const props = defineProps({
    buttonText: {
        type: String,
        default: "查看远端数据"
    },

    width: {
        type: Number,
        default: 700
    },

    height: {
        type: Number,
        default: 400
    },

    url: {
        type: String,
        default: 'http://192.168.1.9:1009/surveyDataServer/device/test'
    },

    xData: {
        type: Object,
        default: () => (["12-3", "12-4", "12-5", "12-6", "12-7", "12-8", "12-10", "12-11", "12-12", "12-13", "12-14"])
    },

    titleText: {
        type: String,
        default: '远端数据展示'
    },

    seriesName: {
        type: String,
        default: '移动距离'
    }

})




const visible = ref(false)
let myChart:any=null

onMounted(async () => {


    let service = axios.create({
        timeout: 5000,
        headers: {
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Methods": "*",
            "Access-Control-Allow-Headers": "*"
        },

    })
    let data = (await service.get(props.url)).data.data.value




    // let data = (await request.get(props.url)).data.value
    // console.log(data)

     myChart = echarts.init(document.getElementById("customerChart") as HTMLElement);
    // 绘制图表
    myChart.setOption({
        title: {
            text: props.titleText,

        },
        tooltip: {},
        xAxis: {
            data: props.xData,
        },
        yAxis: {},
        series: [
            {
                name: props.seriesName,
                type: "line",
                data: data,
            },
        ],
    });

    window.onresize = function () {//自适应大小
        myChart.resize();
    };


})


onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});


</script>
    
<style scoped>

</style>